<template>
  <div class="users">
    <div class="header">
      <router-link to="/Backstage" class="shou">首页</router-link> / 用户管理 / 用户列表
    </div>
    <div class="soui">
      <el-input
        class="sou"
        placeholder="请输入内容"
        v-model="input10"
        clearable>
      </el-input>
      <div class="sous" :plain="true" @click="btn(input10)"><i class="el-icon-search"></i></div>
      <div class="tian">
        <el-button @click="dialogFormVisible = true">添加用户</el-button>
      </div>
      <!-- 添加用户表单 -->
      <div>
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
          <el-form :model="form" ref="form" class="demo-ruleForm">
            <el-form-item
              :label-width="formLabelWidth"
              label="用户名"
              prop="name"
              :rules="[
                { required: true, message: '用户名不能为空'}
              ]"
            >
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item
              :label-width="formLabelWidth"
              label="密码"
              prop="password"
              :rules="[
                { required: true, message: '密码不能为空'},
              ]">
              <el-input v-model.number="form.password" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" :plain="true" @click="submitForm('form')">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 中间的表格 -->
    <div class='biaoge'>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="姓名" width="100"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{scope.row.create_time | dealTime}}
          </template>
        </el-table-column>
        <el-table-column label="用户状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              :plain="true"
               @click.native="kaiguan(scope.row.id,scope.row.mg_state)"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="mg_state" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="fang(scope.row.username,scope.row.email,scope.row.mobile,scope.row.id)"></el-button>
            <el-button type="success" icon="el-icon-delete" circle @click="shan(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-check" circle @click="fenpei(scope.row.username,scope.row.role_name,scope.row.mobile,scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑 -->
    <div class="genggai">
      <el-dialog title="编辑用户" :visible.sync="dialogFormVisiblea">
        <el-form :model="form" ref="form" class="demo-ruleForm">
          <el-form-item label="用户名" required :label-width="formLabelWidth" >
            <el-input v-model="form.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="xiugaiq">取 消</el-button>
          <el-button type="primary" @click="xiugaia" >确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 删除 -->
    <div class="shan_chu">
      <el-dialog
        title="提示"
        :visible.sync="dialogFormVisibleb"
        width="30%"
        center>
        <span>此操作将永久删除该文件，是否继续？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="scqx">取 消</el-button>
          <el-button type="primary" @click="qdsc">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 分配角色 -->
    <div class="fen">
      <el-dialog title="分配角色" :visible.sync="dialogFormVisiblec">
        <el-form :model="form" ref="form" class="demo-ruleForm">
          <el-form-item label="用户名" :label-width="formLabelWidth" >
            {{form.name}}
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth" >
            <el-select v-model="form.mobile" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="fpqx">取 消</el-button>
          <el-button type="primary" @click="fpqd" >确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="tiaoshu"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zong">
      </el-pagination>
    </div>
  </div>
</template>

<script> 
import axios from 'axios';
import {users,xiu,userss,soui,bjyhtj,scdgyh,fpyhjs,jslb} from '../../api/api.js';
import moment from 'moment'
export default {
    name:'users',
    data() {
      return {
        input10: '',
        dialogFormVisible: false,
        dialogFormVisiblea: false,
        dialogFormVisibleb: false,
        dialogFormVisiblec: false,
        form: {
          name: '',
          password:'',
          email:'',
          phone:'',
          type: [],
          id:'',
          role_name:'',
          mobile:''
        },
        formLabelWidth: '120px',
        currentPage4: 1,
        tableData: [],
        tiaoshu:[2,4,6,8,10,12,14,16,18],
        pagesize:2,
        zong:1,
        sj:'',
        options: [],
        value: ''
      }
    },
    watch:{
    },
    methods:{
      xin(){
        users({
        'query':'',
        'pagenum':this.currentPage4,
        'pagesize':this.pagesize,
        }).then(res=>{
          console.log(res)
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            console.log(res.data.data.users);
            this.zong=res.data.data.total
            this.tableData=res.data.data.users
          }
          console.log('data',this.tableData)
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val;
        console.log(this.pagesize);
        this.xin()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4=val;
        console.log(this.currentPage4);
        this.xin()
      },
      //点击修改确定
      xiugaia(){
        bjyhtj({
          id:this.form.id,
          email:this.form.email,
          mobile:this.form.phone
        }).then(res=>{
          console.log(res);
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            this.dialogFormVisiblea = false;
            this.$message({
              showClose: true,
              message: '恭喜您，修改成功',
              type: 'success'
            });
            this.xin()
          }
        })
      },
      //点击修改取消
      xiugaiq(){
        this.dialogFormVisiblea = false;
        this.$message({
          showClose: true,
          message: '已取消',
          type: 'warning'
        });
      },
      //调用添加用户
      tian(){
        userss({
          username:this.form.name,
          password:this.form.password,
          email:this.form.email,
          mobile:this.form.phone
        }).then(res=>{
          console.log(res)
          this.xin();
        })
      },
      //添加点击确定
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false;
            this.tian();
            this.$message({
              showClose: true,
              message: '恭喜您，添加成功',
              type: 'success'
            });
          } else {
            this.$message({
              showClose: true,
              message: '信息未填完噢',
              type: 'warning'
            });
            return false;
          }
        });
      },
      //开关
      kaiguan(id,mg_state){
        xiu({
          uId:id,//	用户 ID	不能为空携带在url中
          type:mg_state,//	用户状态	不能为空携带在url中，值为 true 或者 false
        }).then(res=>{
          console.log('修改用户状态',res)
          this.$message({
            showClose: true,
            message: '恭喜您，操作成功',
            type: 'success'
          });
        })
      },
      //点击搜索
      btn(id){
        soui({
          id:id,
        }).then(res=>{
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            var shua=Object.values(res.data);
            this.tableData=shua;
            this.$message({
              showClose: true,
              message: '搜索成功',
              type: 'success'
            });
          }else{
            this.$message({
              showClose: true,
              message: '搜索失败',
              type: 'error'
            });
            this.xin()
          }
        })
      },
      //点击修改
      fang(name,eml,mob,id){
        this.dialogFormVisiblea=true;
        this.form={
          name:name,
          email:eml,
          phone:mob,
          id:id
        }
      },
      //点击删除按钮
      shan(id){
        this.dialogFormVisibleb=true;
        this.form={
          id:id
        }
      },
      //点击删除确定
      qdsc(){
        this.dialogFormVisibleb=false;
        scdgyh({
          id:this.form.id
        }).then(res=>{
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            console.log('删除成功',res);
            this.xin();
            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          }
        })
      },
      //点击删除取消
      scqx(){
        this.dialogFormVisibleb=false;
        this.$message({
          showClose: true,
          message: '已取消',
          type: 'warning'
        });
      },
      //点击分配
      fenpei(name,role_name,mobile,id){
        this.dialogFormVisiblec=true;
        this.form={
          name,
          role_name,
          mobile,
          id,
        };
        jslb().then(res=>{
          console.log('角色列表',res)
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            this.options=res.data.data
            for(let i=0;i<this.options.length;i++){
              if(this.options[i].roleName==this.form.role_name){
                this.form.mobile=this.options[i].id;
              }
            }
          }
          console.log(this.options)
          console.log('8888',this.form.mobile)
          console.log('8888',this.form.id)
        })
      },
      //分配确定
      fpqd(){
        this.dialogFormVisiblec=false;
        fpyhjs({
          id:this.form.id,
          rid:this.form.mobile
        }).then(res=>{
          if(res.data.meta.status>=200&&res.data.meta.status<300){
            this.xin()
            this.$message({
              showClose: true,
              message: '更改成功',
              type: 'success'
            });
          }
        })
      },
      //分配取消
      fpqx(){
        this.dialogFormVisiblec=false;
        this.$message({
          showClose: true,
          message: '已取消',
          type: 'warning'
        });
      }
    },
    //日期
    filters: {
      dealTime(val){
        return moment(val).format("YYYY-MM-DD")
      }
    },
    created(){
      this.xin();
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.users{
  height:832px;
  width:1620px;
  background-color: #fff;
  border:1px solid #E9EEF3;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  font-size: 14px;
  padding: 20px;
  overflow:scroll;
  overflow-x:auto
}
.header{
  color:#606266;
  letter-spacing:2px;
}
.shou{
  font-weight: bold;
  color:black;
}
.soui{
  margin-top: 8px;
  display: flex;
  align-items: center;
  position: relative;
}
.sou {
  width: 290px;
}
.el-icon-error{
  position: absolute;
  left: 274px;
}
.sous{
  height:38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  border: 1px solid #DCDFE6;
  border-radius: 0 5px 5px 0;
  background-color: #F5F7FA;
}
.tian{
  margin-left: 8px;
  font-size: 14px;
}
.tian .el-button{
  color: #67C23A;
  border:1px solid #C2E7B0;
  border-radius: 5px;
  background-color: #F0F9EB;
}
.el-button:hover{
  background-color: #67C23A;
  color:#fff;
}
.biaoge{
  margin-top: 20px;
}
.block{
  margin-top: 10px;
}
.is-circle:hover{
  background-color: #666;
}
</style>
